import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'
import './homePage.scss'
export default class HomePage extends Component {
  jumpRouter(params) {
    console.log(params.id)
    Taro.navigateTo({
      url: '/pages/videodetail/index?id=' + params.id
    })
  }
  jumpPanorama(params) {
    Taro.navigateTo({
      url: '/pages/panorama/index?id=' + params.panorama
    })
  }
  jumpTo(params) {
    this.props.jumpTo(params)
  }
  handleEmit(current, urls) {
    Taro.previewImage({
      current: current, // 当前显示图片的http链接
      urls: urls.map(v => v.fileUrl) // 需要预览的图片http链接列表
    })
  }
  render() {
    let result = null
    let { items, navBar } = this.props
    if (!items) {
      return false
    }
    if (items.template == 1) {
      let footerPic = items.result.items.items[1].fileDTOList.slice(2)
      let showStyle = items.result.items.items[2].fileDTOList
      let fileDTOList = items.result.items.items[1].fileDTOList.slice(0, 2)
      result = <View id={items.menuCode}>
        <View className='title'>
          <Text className='chinese'>{items.title}</Text>
          <Text className='segmentation'> / </Text>
          <Text className='english'>{items.englishName}</Text>
        </View>
        <View className='subtitle indent30'>
          <View className='vertical'>
            <Image src={require('../../image/icon_title_bg.png')} />
          </View>
          <View className='warpText'>
            <Text className='title1'>{items.result.items.items[0].tittle}</Text>
            <Text className='subtitle1'>{items.result.items.items[0].englishTittle}</Text>
          </View>
        </View>
        <View className='renderPhoto'>
          <View className='topPic'>
            <Image onClick={this.handleEmit.bind(this, fileDTOList[0].fileUrl, fileDTOList)} className='topPic1' src={fileDTOList[0].fileUrl} />
            <Image onClick={this.handleEmit.bind(this, fileDTOList[1].fileUrl, fileDTOList)} src={fileDTOList[1].fileUrl} />
          </View>
          <View className='showStyleWarp'>
            <scroll-view scroll-x>
              <View className='footerPic' style={{ width: footerPic.length / 3 * 100 + '%' }}>
                {footerPic.map(v => <Image onClick={this.handleEmit.bind(this, v.fileUrl, footerPic)} key={v.id} src={v.fileUrl} />)}
              </View>
            </scroll-view>
          </View>
        </View>
        <View className='subtitle indent30'>
          <View className='vertical'>
            <Image src={require('../../image/icon_title_bg.png')} />
          </View>
          <View className='warpText'>
            <Text className='title1'>{items.result.items.items[2].digest}</Text>
            <Text className='subtitle1'>{items.result.items.items[2].englishTittle}</Text>
          </View>
        </View>
        <View className='showStyleWarp'>
          <scroll-view scroll-x>
            <View className='showStyle' style={{ width: showStyle.length / 2 * 100 + '%' }}>
              {showStyle.map(v => <Image onClick={this.handleEmit.bind(this, v.fileUrl, showStyle)} src={v.fileUrl} key={v.id} />)}
            </View>
          </scroll-view>
        </View>

      </View>
    } else if (items.template == 2) {
      let info = items.result.items.items[0]
      result = <View id={items.menuCode}>
        <View className='title margin40'>
          <Text className='chinese'>{items.title}</Text>
          <Text className='segmentation'> / </Text>
          <Text className='english'>{items.englishName}</Text>
        </View>
        <View className='originator'>
          <View className='imgwarp' onClick={this.jumpRouter.bind(this, info)}>
            <Image className='bgInfo' src={info.cover} />
            <Image className='player' src={require('../../image/icon_video_play_white.png')} />
          </View>
          <View className='digest'>
            <Text>{info.digest}</Text>
          </View>
        </View>
      </View>
    } else if (items.template == 3) {
      let info = items.result.items.items
      result = <View id={items.menuCode}>
        <View className='title margin40'>
          <Text className='chinese'>{items.title}</Text>
          <Text className='segmentation'> / </Text>
          <Text className='english'>{items.englishName}</Text>
        </View>
        <View className='teachingSystemWarp'>
          {info.map(item => (
            <View className='warp' key={item.id}>
              <View className='imgwarp' onClick={this.jumpRouter.bind(this, item)}>
                <Image className='bgInfo' src={item.cover} />
                <Image className='player' src={require('../../image/icon_video_play_white.png')} />
              </View>
              <View className='subtitle notpadding'>
                <View className='vertical'>
                  <Image src={require('../../image/icon_title_bg.png')} />
                </View>
                <View className='warpText'>
                  <Text className='title1'>{item.tittle}</Text>
                  <Text className='subtitle1'>{item.digest.slice(0, 22)}</Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    } else if (items.template == 4) {
      let info = items.result.items.items
      result = <View id={items.menuCode}>
        <View className='title margin40'>
          <Text className='chinese'>{items.title}</Text>
          <Text className='segmentation'> / </Text>
          <Text className='english'>{items.englishName}</Text>
        </View>
        <View className='enfoSystem'>
          {info.map(item => (
            <View className='imgwarp' key={item.id}  onClick={this.handleEmit.bind(this, item.cover ? item.cover : item.fileDTOList[0].fileUrl, item.fileDTOList)}>
              <Image className='bgInfo' src={item.cover ? item.cover : item.fileDTOList[0].fileUrl} />
              <Image className='player' src={require('../../image/icon_video_play_white.png')} />
            </View>
          ))}
        </View>
      </View>
    } else if (items.template == 5) {
      let info = items.result.items.items
      result = <View id={items.menuCode}>
        <View className='title margin40'>
          <Text className='chinese'>{items.title}</Text>
          <Text className='segmentation'> / </Text>
          <Text className='english'>{items.englishName}</Text>
        </View>
        <View className='entrepreneursSaid'>
          {info.map(item => (
            <View className='warp' key={item.id}>
              <View className='imgwarp' onClick={this.jumpRouter.bind(this, item)}>
                <Image className='bgInfo' src={item.cover} />
                <Image className='player' src={require('../../image/icon_video_play_white.png')} />
              </View>
              <View className='subtitle margin30'>
                <View className='vertical'>
                  <Image src={require('../../image/icon_title_bg.png')} />
                </View>
                <View className='warpText'>
                  <Text className='title1'>{item.tittle}</Text>
                  <Text className='subtitle1'>{item.digest.slice(0, 36)}</Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    } else if (items.template == 6) {
      let info = items.result.items.items
      result = <View id={items.menuCode}>
        <View className='title margin40'>
          <Text className='chinese'>{items.title}</Text>
          <Text className='segmentation'> / </Text>
          <Text className='english'>{items.englishName}</Text>
        </View>
        <View className='panorama margin40'>
          {info.map(item => (
            <View className='imgwarp' key={item.id}>
              <Image
                onClick={this.jumpPanorama.bind(this, item)}
                className={item.length > 2 ? 'bgInfo' : 'bgInfo1'}
                src={item.cover} />
              <View className='player'>
                <Image src={require('../../image/icon_360_full_screen.png')} />
                <View className='text'>360全景</View>
              </View>
            </View>
          ))}
        </View>
      </View>
    } else if (items.template == 7) {
      let info = items.result.items.items
      result = <View id={items.menuCode}>
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay>
          {info.map(item => (
            <SwiperItem key={item.id}>
              <Image src={item.cover} />
            </SwiperItem>
          ))}
        </Swiper>
        <View className='navBar'>
          {navBar.map(item => (
            <View onClick={this.jumpTo.bind(this, item.menuCode)} className='menuListWarp' key={item.menuCode}>
              <Image src={item.menuIcon} />
              <View className='menuList'>{item.menuName}</View>
            </View>
          ))}
        </View>
      </View>
    } else if (items.template == 8) {
      let info = items.result.items.items
      result = <View id={items.menuCode}>
        <View className='title margin40'>
          <Text className='chinese'>{items.title}</Text>
          <Text className='segmentation'> / </Text>
          <Text className='english'>{items.englishName}</Text>
        </View>
        <View className='elegantDemeanour'>
          {info.map(item => (
            <View className='warp' key={item.id}>
              <View className='imgwarp' onClick={this.jumpRouter.bind(this, item)}>
                <Image className='bgInfo' src={item.cover} />
                <Image className='player' src={require('../../image/icon_video_play_white.png')} />
              </View>
              <View className='subtitle notpadding'>
                <View className='warpText'>
                  <Text className='title1'>{item.tittle}</Text>
                  <Text className='subtitle1'>{item.digest.slice(0, 18)}</Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    }
    //  else {
    //   result = <View>
    //     <View className='title margin40'>
    //       <Text className='chinese'>{items.title}</Text>
    //       <Text className='segmentation'> / </Text>
    //       <Text className='english'>{items.englishName}</Text>
    //     </View>
    //     <View className='information'>
    //       {Infomation.map(item => (
    //         <View key={item.id} className='warpInfo'>
    //           <View className='item'>
    //             <Image src={item.headPortrait} className="headPortrait" />
    //             <View className='titlewarp'>
    //               <View className='rightbox'>
    //                 <Text className='nickName'>{item.nickName}</Text>
    //                 <View className='levelWarp'>
    //                   <Image src={require('../../image/level.png')} alt="" />
    //                   <Text>{item.level}</Text>
    //                 </View>
    //               </View>
    //               <View className="timer">{item.creationTime}</View>
    //             </View>
    //           </View>
    //           <View dangerouslySetInnerHTML={{ __html: item.content }}></View>
    //         </View>
    //       ))}
    //     </View>
    //   </View>
    // }
    return result
  }
}